<template>
  <div class="app-container">
    <div class="head-container flex-center" style="border-bottom: 1px solid #ddd;">
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>审批流程绑定</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="text-align: right">
        <el-button type="primary"
                   plain
                   size="small"
                   v-has-permi="['system:definition:insert']"
                   @click="addProcess">新增审批流
        </el-button>
        <el-button type="danger"
                   plain
                   size="small"
                   :disabled="ids.length === 0"
                   v-has-permi="['system:definition:delete']"
                   @click="deleteProcess">删除审批流
        </el-button>
      </div>
    </div>

    <div class="body-container">
      <el-form :model="queryParams"
               ref="queryForm"
               class="queryForm"
               :inline="true">
        <el-form-item label="审批流名称：" prop="name">
          <el-input v-model="queryParams.name"
                    placeholder="请输入审批流名称"
                    clearable
                    size="small" />
        </el-form-item>
        <el-form-item label="状态：">
          <Select :options="statusOptions"
                  placeholder="请选择使用状态"
                  v-model="queryParams.status" />
        </el-form-item>
      </el-form>

      <el-table v-loading="loading"
                :data="processList"
                border
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column label="审批流名称"
                         prop="name"
                         width="260"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="审批流编码"
                         prop="code"
                         width="220"
                         :show-overflow-tooltip="true"/>
        <el-table-column label="状态"
                         width="120"
                         :formatter="row => selectDictLabel(statusOptions, row.status)"
                         prop="status"/>
        <el-table-column label="备注"
                         prop="remark"/>
        <el-table-column label="创建日期"
                         :formatter="row => dateFormatter(row, 'createTime')"
                         prop="createTime"
                         width="220"/>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="small"
                       type="primary"
                       plain
                       v-has-permi="['system:definition:detail']"
                       icon="el-icon-edit"
                       @click="showDetail(scope.row)">编辑
            </el-button>
            <el-button size="small"
                       type="danger"
                       plain
                       icon="el-icon-delete"
                       v-has-permi="['system:definition:delete']"
                       @click="deleteProcess(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>

  </div>
</template>

<script>
  import Select from '@/components/form/Select'
  import { listProcess, deleteProcess } from "@/api/system/process"

  export default {
    name: "Role",
    components: { Select },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 表格数据
        processList: [],
        // 审批模式值集
        modeOptions: [],
        // 使用状态值集
        statusOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: undefined,
          name: undefined
        },
        // 表单参数
        form: {},
        // 选择的数据
        ids: []
      }
    },
    created() {
      this.getList()
      // 字典查询
      this.getDicts("sys_audit_mode").then(response => {
        this.modeOptions = response.data
      })
      this.getDicts('sys_common_status').then(response => {
        this.statusOptions = response.data
      })
    },
    methods: {
      /** 查询数据 */
      getList() {
        listProcess(this.queryParams).then(res => {
          this.processList = res.data
          this.total = res.total
          this.loading = false
        })
      },
      // 表单重置
      reset() {
        this.form = {}
        this.resetForm("form")
      },
      /** 多选框选中数据 */
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item._id)
      },
      /** 新增审批流 */
      addProcess() {
        this.$router.push('/system/process/definition')
      },
      /** 表格中点击编辑跳转至定义审批流程界面 */
      showDetail(row) {
        this.$router.push({path: '/system/process/definition', query: {code: row.code}})
      },
      /** 批量删除审批流 */
      deleteProcess(row) {
        const ids = row._id ? [row._id] : this.ids
        this.$confirm('是否确认删除目标审批流?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return deleteProcess(ids)
        }).then(() => {
          this.getList()
          this.msgSuccess("删除成功")
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="scss">
  .queryForm {
    .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>
